<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="title">标题</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['title']">
        <input type="text" nz-input formControlName="title" placeholder="标题">
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('required')">请输入标题</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('maxlength')">不能超过60个字</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="forwardingTitle">转发标题</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['forwardingTitle']">
        <input type="text" nz-input formControlName="forwardingTitle" placeholder="转发标题">
        <nz-form-explain *ngIf="validateForm.get('forwardingTitle').dirty && validateForm.get('forwardingTitle').hasError('required')">请输入转发标题</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('forwardingTitle').dirty && validateForm.get('forwardingTitle').hasError('maxlength')">不能超过100个字</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="typeId">活动类型</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-select formControlName="typeId" [nzPlaceHolder]="'活动类型'">
          <nz-option
            *ngFor="let option of typeOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id">
          </nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('typeId').dirty && validateForm.get('typeId').hasError('required')">请选择活动类型</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="descPrice">活动累计</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['descPrice']">
        <nz-input-number style="width: 100%;" [nzMin]="0"  [nzStep]="5" [nzPlaceHolder]="'活动累计'" formControlName="descPrice"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('descPrice').dirty && validateForm.get('descPrice').hasError('min')">不能小于0</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="beginTime">开始日期</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-date-picker formControlName="beginTime"
        [nzDisabledDate]="disabledStartDate"
        nzFormat="yyyy-MM-dd 00:00:00"
        nzPlaceHolder="开始日期"
        (ngModelChange)="onStartChange($event)"
        (nzOnOpenChange)="handleStartOpenChange($event)">
      </nz-date-picker>
        <nz-form-explain *ngIf="validateForm.get('beginTime').dirty && validateForm.get('beginTime').hasError('required')">请选择开始日期</nz-form-explain>
        <nz-form-extra style="color: orange;">不设置默认马上开始</nz-form-extra>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="endTime">结束日期</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <nz-date-picker formControlName="endTime"
        [nzDisabledDate]="disabledEndDate"
        nzFormat="yyyy-MM-dd 23:59:59"
        nzPlaceHolder="结束日期"
        (ngModelChange)="onEndChange($event)"
        (nzOnOpenChange)="handleEndOpenChange($event)">
      </nz-date-picker>
        <nz-form-explain *ngIf="validateForm.get('endTime').dirty && validateForm.get('endTime').hasError('required')">请选择结束日期</nz-form-explain>
        <nz-form-extra style="color: orange;">不设置默认开始后不结束</nz-form-extra>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="btnText">按钮名称</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['btnText']">
        <input type="text" nz-input formControlName="btnText" placeholder="按钮名称">
        <nz-form-explain *ngIf="validateForm.get('btnText').dirty && validateForm.get('btnText').hasError('required')">请输入按钮名称</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('btnText').dirty && validateForm.get('btnText').hasError('maxlength')">不能超过16个字</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="descText">按钮前置说明</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['descText']">
        <input type="text" nz-input formControlName="descText" placeholder="按钮前置说明">
        <nz-form-explain *ngIf="validateForm.get('descText').dirty && validateForm.get('descText').hasError('required')">请输入按钮前置说明</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('descText').dirty && validateForm.get('descText').hasError('maxlength')">不能超过32个字</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!--<nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="activityProductId">关联产品(在线订购产品)</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['activityProductId']">
        <nz-select formControlName="activityProductId" [nzPlaceHolder]="'请选择关联产品'" >
          <nz-option
            *ngFor="let option of allProducts"
            [nzLabel]="option.title"
            [nzValue]="option.id">
          </nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('activityProductId').dirty && validateForm.get('activityProductId').hasError('required')">请选择关联产品</nz-form-explain>
      </nz-form-control>
    </nz-form-item>-->
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="activityProductArr">关联产品(在线订购产品)</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['activityProductArr']">
        <nz-select formControlName="activityProductArr" [nzMode]="'multiple'" [nzPlaceHolder]="'请选择关联产品'" >
          <nz-option
            *ngFor="let option of allProducts"
            [nzLabel]="option.title"
            [nzValue]="option.id">
          </nz-option>
        </nz-select>
        <nz-form-extra style="color: orange;">  未选择关联产品时，小程序端将不会显示订购按钮</nz-form-extra>
        <nz-form-explain *ngIf="validateForm.get('activityProductArr').dirty && validateForm.get('activityProductArr').hasError('required')">请选择关联产品</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="mainImg">活动主图</nz-form-label>
      <nz-form-control [nzSpan]="4" [nzValidateStatus]="validateForm.controls['mainImg']">
        <input type="text" nz-input formControlName="mainImg" placeholder="活动主图" style="display: none;">
        <nz-upload class="upload-list-inline"
                   [nzMultiple]="true"
                   [nzAction]="uploadDomain"
                   [nzHeaders]="headers"
                   (nzChange)="handleChange($event)"
                   [nzSize]="2048"
                   nzAccept=".jpg,.jpeg,.png,.gif"
                   nzListType="picture-card"
                   [nzShowUploadList]="false">
          <ng-container *ngIf="!entity.mainImg">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">上传活动主图</div>
          </ng-container>
          <img *ngIf="entity.mainImg" [src]="entity.mainImg|qCloudDomain" title="点击可修改主图" class="avatar">
        </nz-upload>
        <nz-form-explain *ngIf="validateForm.get('mainImg').dirty && validateForm.get('mainImg').hasError('required')">
          请选择活动主图
        </nz-form-explain>
        <nz-form-extra style="color: orange;">请上传小于2MB的图片<br> 且为了最佳移动端视觉效果，请根据小程序首页设置对各位置对图大小需求上传</nz-form-extra>
      </nz-form-control>
      <nz-form-label [nzSpan]="2" nzRequired nzFor="mainBanner">名片首页&nbsp;&nbsp;&nbsp;&nbsp;<br/>推荐广告图</nz-form-label>
      <nz-form-control [nzSpan]="4" [nzValidateStatus]="validateForm.controls['mainBanner']">
        <input type="text" nz-input formControlName="mainBanner" placeholder="名片首页推荐广告图" style="display: none;">
        <nz-upload class="upload-list-inline"
                   [nzMultiple]="true"
                   [nzAction]="uploadDomain"
                   [nzHeaders]="headers"
                   (nzChange)="handleChange1($event)"
                   [nzSize]="2048"
                   nzAccept=".jpg,.jpeg,.png,.gif"
                   nzListType="picture-card"
                   [nzShowUploadList]="false">
          <ng-container *ngIf="!entity.mainBanner">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">上传名片首页推荐广告图</div>
          </ng-container>
          <img *ngIf="entity.mainBanner" [src]="entity.mainBanner|qCloudDomain" title="点击可修改名片首页推荐广告图" class="avatar">
        </nz-upload>
        <nz-form-explain *ngIf="validateForm.get('mainBanner').dirty && validateForm.get('mainBanner').hasError('required')">
          请选择名片首页推荐广告图
        </nz-form-explain>
        <nz-form-extra style="color: orange;">请上传小于2MB的图片<br> 且为了最佳移动端视觉效果，我们建议您添加大小约690*300的图片</nz-form-extra>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzFor="fixedQuantity">是否固定数量</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['fixedQuantity']">
        <nz-radio-group formControlName="fixedQuantity">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="2">否</label>
        </nz-radio-group>
        <nz-form-extra style="color: orange;">
          温馨提示： 选择固定数量，小程序端下单将不可修改数量，<br/>
          <span style="color:red;">并且下单时默认数量为关联产品中设置的起订量，</span>请注意您的配置
        </nz-form-extra>
        <nz-form-explain *ngIf="validateForm.get('fixedQuantity').dirty && validateForm.get('fixedQuantity').hasError('required')">请选择是否固定数量</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="needProtocol">是否启用在线协议</nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['needProtocol']">
        <nz-radio-group formControlName="needProtocol">
          <label nz-radio [nzValue]="1">是</label>
          <label nz-radio [nzValue]="2">否</label>
        </nz-radio-group>
        <nz-form-extra style="color: orange;">
          温馨提示： 若启用，请配置协议标题和内容，<br/>
          <span style="color:red;"> 并且小程序端要点同意才能进行预订。</span>
        </nz-form-extra>
        <nz-form-explain *ngIf="validateForm.get('needProtocol').dirty && validateForm.get('needProtocol').hasError('required')">请选择是否启用在线协议</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="remark">
        活动简介
      </nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['remark']" class="content-class">
        <textarea rows="3" nz-input formControlName="remark" placeholder="活动简介" ></textarea>
        <nz-form-explain *ngIf="validateForm.get('remark').dirty && validateForm.get('remark').hasError('required')">请输入活动简介</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('remark').dirty && validateForm.get('remark').hasError('maxlength')">不能超过500个字</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="protocolTitle">
        协议标题
      </nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['protocolTitle']" class="content-class">
        <input type="text" nz-input formControlName="protocolTitle" placeholder="协议标题">
        <nz-form-explain *ngIf="validateForm.get('protocolTitle').dirty && validateForm.get('protocolTitle').hasError('required')">请输入协议标题</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('protocolTitle').dirty && validateForm.get('protocolTitle').hasError('maxlength')">不能超过100个字</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4" nzRequired nzFor="description">
        详情
      </nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['description']" class="content-class">
        <textarea rows="6" nz-input formControlName="description" placeholder="详情" style="display: none;"></textarea>
        <div id="content-section" title="点击可进行内容编辑修改" (click)="showEdit()" style="text-align: center;display:block;height: 582px;border: 1px solid #d9d9d9;overflow-y: auto;cursor: pointer;" #content></div>
        <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').hasError('required')">请输入详情</nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="4" nzFor="protocolDescription">
        协议内容
      </nz-form-label>
      <nz-form-control [nzSpan]="8" [nzValidateStatus]="validateForm.controls['protocolDescription']" class="content-class">
        <textarea rows="6" nz-input formControlName="protocolDescription" placeholder="协议内容" style="display: none;"></textarea>
        <div id="protocolDescription" title="点击可进行协议内容编辑修改" (click)="showEdit1()" style="text-align: center;display:block;height: 582px;border: 1px solid #d9d9d9;overflow-y: auto;cursor: pointer;" #protocolDescription></div>
        <nz-form-explain *ngIf="validateForm.get('protocolDescription').dirty && validateForm.get('protocolDescription').hasError('required')">请输入协议内容</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <div nz-form-item nz-row  style="text-align: center;border-top: 1px solid #d0d0d0; padding-top: 12px;">
      <button nz-button type="submit" [nzType]="'primary'" >保存</button>
    </div>
  </form>
  <full-screen-editor [contentVal]="entity.description" (close)="showEdit()" (contentCallback)="contentCallback($event)" *ngIf="isShow"></full-screen-editor>
  <full-screen-editor [contentVal]="entity.protocolDescription" (close)="showEdit1()" (contentCallback)="contentCallback1($event)" *ngIf="isShow1"></full-screen-editor>
</nz-card>
